<template>
  <view class="page">
    <view v-if="shenheAliStatus === 1">
      <view v-if="isShowTitle">
        <u-navbar :is-back="isBack" back-text=" " title="应用简介"></u-navbar>
      </view>
      <view class="page-content">
        <view class="content-header">
          <view class="shopInfo">
            <view>{{ mini_info.app_name }}</view>
          </view>
          <image
            :src="store_info.logo"
            @click="previewImage(store_info.logo)"
          />
        </view>
        <view class="content-body"> </view>
        <view class="content-introduce">
          <ul>
            <li><text>应用名称：</text>{{ mini_info.app_name }}</li>
            <li><text>应用简介：</text>{{ mini_info.app_slogan }}</li>
            <li><text>应用描述：</text>{{ mini_info.app_desc }}</li>
            <li><text>应用分类：</text>{{ mini_info.category_name }}</li>
            <li><text>客服电话：</text>{{ mini_info.service_phone }}</li>
            <li><text>备案编号：</text>{{ mini_info.license_no }}</li>
          </ul>
        </view>
      </view>
    </view>
    <view class="body flex-col" v-else>
      <view v-if="isShowTitle">
        <u-navbar :is-back="isBack" back-text=" " title="商品列表"></u-navbar>
      </view>
      <scroll-view @scrolltolower="loadData()" scroll-y class="list">
        <div class="list-box" v-if="pageData.list.length">
          <template v-for="(good, index) in pageData.list">
            <horizontalList :key="index" :good="good"></horizontalList>
          </template>
          <u-loadmore :status="status"></u-loadmore>
        </div>
        <u-empty v-else mode="data"></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import allrequest from "api/allrequest.js";
import horizontalList from "@/components/search/components/horizontalList.vue"; // 横版商品
import { mapGetters } from "vuex";
export default {
  components: {
    horizontalList,
  },
  data() {
    return {
      money: "",
      timer: null,
      // #ifdef MP-WEIXIN
      payment: 1, // 当面付，默认为微信支付
      // #endif
      // #ifdef MP-ALIPAY
      payment: 4, // 当面付，默认为微信支付
      // #endif
      order_id: "",
      store_info: {},
      isShowTitle: true,
      isBack: false,
      mini_info: {},
      article: {
        desc: "",
        name: "",
      },
      pageData: {
        list: [],
        page: 1,
      },
      status: "loadmore",
    };
  },
  computed: {
    ...mapGetters(["shenheAliStatus"]),
    btnStyle() {
      if (this.money) {
        return { color: "#FFFFFF", background: "#0EB5F8" };
      } else {
        return { color: "#999999", background: "#E0E0E0" };
      }
    },
    // 是否显示返回箭头
    isBack() {
      var pages = getCurrentPages();
      return pages.length > 1;
    },
  },
  async created() {
    this.getStore();
    const res = await allrequest.request.mpAudit();
    if (!res.code) {
      if (res.data.article && res.data.article.desc) {
        res.data.article.desc = this.formatRichText(res.data.article.desc);
      }
      this.article = res.data.article;
    }
    // uni.setNavigationBarTitle({
    //   title: this.stores.name,
    // });
    this.loadData();
  },
  methods: {
    async loadData(reset) {
      if (reset) {
        let { pageData, status } = this.$options.data();
        this.pageData = pageData;
        this.status = status;
      }
      if (this.status == "nomore") return;
      const res = await this.$allrequest.search.getSearchList(
        {
          keyword: "",
          page: this.pageData.page,
        },
        true
      );
      this.pageData.list.push(...res.data.list);
      this.status =
        res.data.row_count <= this.pageData.list.length ? "nomore" : "loadmore";
      this.pageData.page++;
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="display:block;max-width:100%;height:auto"'
      );
      return newContent;
    },

    // 获取商户信息
    async getStore() {
      const res = await this.$allrequest.facePay.getStoreDetail();
      if (res.code == 0) {
        this.store_info = res.data.store_info;
        this.mini_info = res.data.mini_info;
      }
    },
    previewImage(image) {
      uni.previewImage({
        current: 0, // 当前显示图片的链接/索引值
        urls: [image], // 需要预览的图片链接列表，photoList要求必须是数组
        loop: true, // 是否可循环预览
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: PingFang SC;

  .page-content {
    width: 702rpx;
    margin: 20rpx auto;
    height: 100vh;
    line-height: 50rpx;

    image {
      width: 100%;
      height: 250rpx;
    }
    .content-header {
      width: 100%;
      height: 160rpx;
      background: #f7f7f7;
      border-radius: 14rpx 14rpx 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 42rpx 50rpx;

      .shopInfo {
        font-size: 34rpx;
        font-weight: 500;
        color: #191919;

        view:last-child {
          font-size: 26rpx;
          font-weight: 400;
          color: #595959;
          margin-top: 18rpx;
        }
      }

      image {
        width: 96rpx;
        height: 96rpx;
        background: #ffffff;
        border-radius: 14rpx;
      }
    }

    .content-body {
      width: 100%;
      background: #ffffff;
      border-radius: 0 0 14rpx 14rpx;
      padding: 58rpx 50rpx 0 50rpx;
      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: #191919;
      }
      .addMargin {
        margin-top: 47rpx;
      }
      .addPadding {
        padding-top: 47rpx;
      }
      .noPadding {
        padding-top: 0;
      }

      .hold-height {
        height: 47rpx;
        width: 100%;
      }

      .input-section {
        display: flex;
        font-size: 78rpx;
        font-weight: 500;
        color: #191919;
        border-bottom: 1rpx solid #e5e5e5;
        view {
          width: 70rpx;
          text-align: left;
        }

        input {
          flex: 1;
          font-size: 112rpx;
          font-weight: 500;
          color: #191919;
          height: 120rpx;
        }
      }

      .remark {
        margin-top: 39rpx;
        padding-bottom: 48rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 9rpx;
          height: 16rpx;
        }
      }
    }

    .content-foot {
      width: 100%;
      height: 90rpx;
      background: #e0e0e0;
      border-radius: 45rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #999999;
      margin-top: 60rpx;
    }

    .content-introduce {
      padding: 30rpx 0;
      ul {
        list-style: none;
        padding: 0;
        li {
          width: 100%;
          padding: 0;
          color: #6b6b6b;
          margin-bottom: 15rpx;
          text-indent: 1em;
          line-height: 50rpx;
          text {
            font-weight: 600;
            color: #000;
          }
        }
      }
    }
  }
}
</style>